<template>
  <view class="content">
    <view class="title-container">
      <view class="title" :class="{ 'title-fade-in': isLoaded }">欢迎来到清风聊天软件</view>
    </view>
    
    <view class="form-box" :class="{ 'form-fade-in': isLoaded }">
      <image class="bg" mode="aspectFill" :src="bg" :class="{ 'bg-animation': isLoaded }" />
      
      <view class="form" :class="{ 'form-slide-up': isLoaded }">
        <view class="row-input" :class="{ 'input-focused': phoneFocus }">
          <image mode="aspectFill" :src="phone" :class="{ 'icon-pulse': phoneFocus }" />
          <input 
            v-model="userData.username"
            placeholder="请输入用户名称" 
            placeholder-class="placeholder" 
            maxlength="11"
            @focus="phoneFocus = true"
            @blur="phoneFocus = false"
            class="input-text"
          />
        </view>
        
        <view class="row-input" :class="{ 'input-focused': passwordFocus }">
          <image mode="aspectFill" :src="password" :class="{ 'icon-pulse': passwordFocus }" />
          <input 
            v-model="userData.password"
            :type="passwordType"
            placeholder="请输入密码" 
            placeholder-class="placeholder" 
            maxlength="18" 
            @focus="passwordFocus = true"
            @blur="passwordFocus = false"
            class="input-text"
          />
          <image 
            mode="aspectFill" 
            :src="passwordVisible ? '/static/login/cl.png' : '/static/login/op.png'" 
            class="password-toggle-icon"
            @tap="togglePasswordVisibility"
            :class="{ 'icon-pulse': passwordFocus }"
          />
        </view>
        
        <!-- 密码强度指示器 -->
        <view class="password-strength" v-if="userData.password">
          <view class="strength-bars">
            <view :class="['strength-bar', { 'weak': passwordStrength === 'weak' }]"></view>
            <view :class="['strength-bar', { 'medium': passwordStrength === 'medium' }]"></view>
            <view :class="['strength-bar', { 'strong': passwordStrength === 'strong' }]"></view>
          </view>
          <text class="strength-text">{{ passwordStrengthText }}</text>
        </view>
        
        <view 
          class="login-btn" 
          @tap="handleLogin"
        >
          <span>登录</span>
        </view>
      </view>
    </view>
    
    <view class="menu-link">
      <text 
        style="border-right: 1rpx solid #9fa9c7;"
        @tap="goToForgetPassword"
        :class="{ 'link-hover': isForgetHover }"
      >忘记密码</text>
      <text 
        style="border-left: 1rpx solid #9fa9c7;"
        @tap="goToRegister"
        :class="{ 'link-hover': isRegisterHover }"
      >用户注册</text>
    </view>
    
    <!-- 新增遮罩层和加载动画 -->
    <view class="loading-mask" v-if="isLoading">
      <view class="loading-circle"></view>
    </view>
  </view>
</template>

<script setup>
	import { ref, onMounted, watch } from 'vue'
	
	// 图片资源引用
	const bg = ref("/static/login/bg.png")
	const phone = ref("/static/login/phone.png")
	const password = ref("/static/login/password.png")
	
	// 状态控制变量
	const isLoaded = ref(false)
	const phoneFocus = ref(false)
	const passwordFocus = ref(false)
	const isLoading = ref(false) // 控制遮罩层显示
	const isForgetHover = ref(false)
	const isRegisterHover = ref(false)
	
	// 密码显示状态
	const passwordVisible = ref(false)
	const passwordType = ref('password')
	
	// 用户数据对象
	const userData = ref({
	  username: '',
	  password: ''
	})
	
	// 密码强度
	const passwordStrength = ref('')
	const passwordStrengthText = ref('')
	
	onMounted(() => {
	  setTimeout(() => {
	    isLoaded.value = true
	  }, 100)
	})
	
	// 监听密码变化，实时计算强度
	watch(() => userData.value.password, (newVal) => {
	  calculatePasswordStrength(newVal)
	})
	
	// 计算密码强度
	const calculatePasswordStrength = (password) => {
	  if (!password) {
	    passwordStrength.value = ''
	    passwordStrengthText.value = ''
	    return
	  }
	  
	  let score = 0
	  
	  // 基本长度检查
	  if (password.length >= 8) score += 1
	  if (password.length >= 12) score += 1
	  
	  // 包含数字
	  if (/[0-9]/.test(password)) score += 1
	  
	  // 包含小写字母
	  if (/[a-z]/.test(password)) score += 1
	  
	  // 包含大写字母
	  if (/[A-Z]/.test(password)) score += 1
	  
	  // 包含特殊字符
	  if (/[^a-zA-Z0-9]/.test(password)) score += 1
	  
	  // 组合复杂度
	  if ((/[a-z]/.test(password) && /[0-9]/.test(password)) || 
	      (/[A-Z]/.test(password) && /[0-9]/.test(password)) ||
	      (/[a-zA-Z]/.test(password) && /[^a-zA-Z0-9]/.test(password))) {
	    score += 1
	  }
	  
	  // 评定等级
	  if (score <= 3) {
	    passwordStrength.value = 'weak'
	    passwordStrengthText.value = '弱'
	  } else if (score <= 5) {
	    passwordStrength.value = 'medium'
	    passwordStrengthText.value = '中'
	  } else {
	    passwordStrength.value = 'strong'
	    passwordStrengthText.value = '强'
	  }
	}
	
	// 切换密码显示状态
	const togglePasswordVisibility = () => {
	  passwordVisible.value = !passwordVisible.value
	  passwordType.value = passwordVisible.value ? 'text' : 'password'
	  
	  const icon = document.querySelector('.password-toggle-icon')
	  if (icon) {
	    icon.classList.add('scale-animation')
	    setTimeout(() => {
	      icon.classList.remove('scale-animation')
	    }, 200)
	  }
	}
	
	const handleLogin = () => {
	  // 校验用户名
	  const username = userData.value.username.trim()
	  if (!username) {
	    uni.showToast({
	      title: '用户名不能为空',
	      icon: 'none'
	    })
	    return
	  }
	  
	  if (username.length < 4) {
	    uni.showToast({
	      title: '用户名至少需要4个字符',
	      icon: 'none'
	    })
	    return
	  }
	  
	  // 校验密码
	  const password = userData.value.password
	  if (!password) {
	    uni.showToast({
	      title: '密码不能为空',
	      icon: 'none'
	    })
	    return
	  }
	  
	  if (password.length < 8) {
	    uni.showToast({
	      title: '密码长度至少需要8位',
	      icon: 'none'
	    })
	    return
	  }
	  
	  // 密码复杂度校验
	  const hasLetter = /[a-zA-Z]/.test(password)
	  const hasNumber = /\d/.test(password)
	  
	  if (!hasLetter || !hasNumber) {
	    uni.showToast({
	      title: '密码需要同时包含字母和数字',
	      icon: 'none'
	    })
	    return
	  }
	  
	  // 显示遮罩层和加载动画
	  isLoading.value = true
	  
	  // 模拟登录请求（替换为实际接口调用）
	  setTimeout(() => {
	    uni.showToast({
	      title: '登录成功',
	      icon: 'none'
	    })
	    uni.navigateTo({
	      url:"/pages/tabbar/tabbar"
	    })
	    
	    // 重置表单
	    userData.value = {
	      username: '',
	      password: ''
	    }
	    
	    // 隐藏遮罩层和加载动画
	    isLoading.value = false
	  }, 1500)
	}
	
	// 跳到找回密码
	const goToForgetPassword = () => {
	  isForgetHover.value = true
	  uni.navigateTo({
	    url:"/pages/login/findPassword"
	  })
	  setTimeout(() => {
	    isForgetHover.value = false
	  }, 200)
	}
	
	// 跳到注册界面
	const goToRegister = () => {
	  isRegisterHover.value = true
	  uni.navigateTo({
	    url:"/pages/login/register"
	  })
	  setTimeout(() => {
	    isRegisterHover.value = false
	  }, 200)
	}
</script>

<style lang="less" scoped>
page{
  background-color: #1f265a;
  overflow: hidden;
}

.title-container {
  position: relative;
  z-index: 10;
}

.title {
  padding-top: 80px;
  display: flex;
  margin-right: 40px;
  justify-content: center;
  align-items: center;
  padding-left: 80rpx;
  height: 200rpx;
  font-size: 45rpx;
  letter-spacing: 5rpx;
  color: #eef8fd;
  opacity: 0;
  transform: translateY(30rpx);
  transition: all 0.5s ease-out;
}

.title-fade-in {
  opacity: 1;
  transform: translateY(0);
}

.form-box {
  position: relative;
  height: 660rpx;
  overflow: hidden;
  
  .bg {
    position: absolute;
    padding-left: 50rpx;
    display: flex;
    justify-content: center;
    position: relative;
    width: 650rpx;
    height: 660rpx;
    opacity: 0;
    transform: scale(1.05);
    transition: all 0.8s ease-out;
  }
  
  .bg-animation {
    opacity: 1;
    transform: scale(1);
  }
  
  .form {
    position: absolute;
    top: 100rpx;
    left: 120rpx;
    right: 120rpx;
    opacity: 0;
    transform: translateY(50rpx);
    transition: all 0.6s ease-out 0.2s;
  }
  
  .form-slide-up {
    opacity: 1;
    transform: translateY(0);
  }
  
  .row-input {
    padding-top: 40rpx;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 80rpx;
    margin-bottom: 40rpx;
    border-bottom: 1rpx solid #576294;
    transition: all 0.3s ease;
    padding-right: 10rpx; /* 增加右侧内边距 */
  }
  
  .row-input.input-focused {
    border-bottom: 2rpx solid #467ee4;
  }
  
  image {
    margin: 0rpx 20rpx 0rpx 10rpx;
    flex-shrink: 0;
    width: 27rpx;
    height: 32rpx;
    transition: all 0.3s ease;
  }
  
  .icon-pulse {
    animation: pulse 1.5s infinite;
  }
  
  .input-text {
    flex: 1;
    font-size: 28rpx;
    color: #eef8fd;
    padding-right: 50rpx; /* 为图标留出空间 */
  }
  
  .placeholder {
    font-size: 28rpx;
    color: #6572ac;
  }
  
  .login-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    color: #ffffff;
    font-size: 35rpx;
    letter-spacing: 5rpx;
    border-radius: 50rpx;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
    box-shadow: 0 10rpx 25rpx -5rpx rgba(79, 70, 229, 0.5), 
                0 8rpx 10rpx -6rpx rgba(79, 70, 229, 0.3);
    transition: all 0.3s ease;
  }

  /* 密码强度指示器 */
  .password-strength {
    margin-top: 15rpx;
    margin-bottom: 30rpx;
    
    .strength-bars {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5rpx;
    }
    
    .strength-bar {
      width: 30%;
      height: 6rpx;
      border-radius: 3rpx;
      background-color: #576294;
      
      &.weak {
        background-color: #ff4d4f;
      }
      
      &.medium {
        background-color: #faad14;
      }
      
      &.strong {
        background-color: #52c41a;
      }
    }
    
    .strength-text {
      font-size: 22rpx;
      color: #9fa9c7;
    }
  }
  
  /* 密码显示/隐藏切换图标样式 */
  .password-toggle-icon {
    width: 32rpx;
    height: 32rpx;
    margin: 0rpx 10rpx 0rpx 10rpx;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  /* 点击动画效果 */
  .scale-animation {
    animation: scale 0.3s ease;
  }
  
  @keyframes scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
}

.menu-link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120rpx;
  font-size: 28rpx;
  color: #9fa9c7;
  margin-top: 50rpx;
}

text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25rpx;
  width: 180rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.link-hover {
  color: #467ee4;
  transform: translateY(-3rpx);
}

/* 输入框图标脉冲动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 新增遮罩层和加载动画样式 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明遮罩 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保在最上层 */
}

.loading-circle {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #ccc;
  border-top-color: #6366f1; /* 加载圈颜色，可自定义 */
  border-radius: 50%;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>